练习01<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
    <meta name="author" content="ykf">
    <title>五星好评</title>
    <style>
        body{
            /*文字大小12px，1.5倍的行间距，arial 一种字体*/
            font: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0 ;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,#star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            float: left;
            height: 24px;
            width: 24px;
            cursor: pointer;
            background-image: url(img/star.png);
            background-repeat: no-repeat;
            list-style: none;
        }
        #star li.on{
            background-position: 0 -28px;
            /*display: none;*/
        }
        #star p{
            position: absolute;
            top: 20px;
            width: 160px;
        }
        #star p em{
            display: block;
            font-style: normal;
            color: #f60;
        }
        #star strong{
            color: #f60;
        }
    </style>
</head>
<body>
    <div id="star">
        <span>点击星星评分</span>
        <ul>
            <!--<li class="on"></li>-->
            <li></li>            
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--显示最终评分结果-->
        <span></span>
        <!--显示评分及评语-->
        <p></p>
    </div>
</body>
</html>
<script>
 $(function (){
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    // split()通过指定字符分隔字符串
    // console.log(msg[0].split('|'));
    
    // 用来记录点击了第几个li标签
    var isStar = 0;

    $('#star ul li').each(function(index,elem){

        $(this).mouseover(function(){
            // show();
            show(index+1);
            // 显示评分评语
            var left = $('#star ul').position().left+ index*$(this).width();
            var html = '<em><b>'+(index+1)+'</b>分 '+msg[index].split('|')[0]+'<em>'+msg[index].split('|')[1];
            $('#star p').css('left',left).html(html);
        })

        $(this).click(function(){
            isStar = index+1;
            $('#star span:last').html('<strong>'+isStar+'分</strong>（'+msg[index].split('|')[1]+'）');
            $('#star p').empty();
        })

        $(this).mouseout(function () {
			show(isStar);
			$('#star p').empty();
		});
        
    });


    // 展示星星、
    function show (score) {
        $('#star ul li').each(function(index){
            if(index < score){
                this.className = 'on';
            }else{
                this.classname = '';
            };
        });
    };
});  
</script>